<template>
    <div class="search">
        <!-- 搜索框组件 -->
        <van-search
            v-model="keyword"
            show-action
            @search="onSearch"
            @cancel="onCancel"
            @input="onInput"
            placeholder="520礼包抢先领"
        />
        <!-- 热门搜索组件 -->
        <HistoryHot 
            v-if="isShow == 1"
            :historyKeywordList="historyKeywordList"
            :hotKeywordList="hotKeywordList"
            @gotoSearch="gotoSearchFn"
        ></HistoryHot>
        <!-- 搜索提示列表组件 -->
        <SearchList 
            v-else-if="isShow == 2"
            :searchList="searchList"
            @goSearch="gotoSearchFn"
        ></SearchList>
        <!-- 下拉菜单和商品列表组件 -->
        <GoodsList
            v-else 
            :filterCategory="filterCategory"
            :goodsList="goodsList"
            @transfer="changePriceFn"
            @transfer1="changeKindFn"
        ></GoodsList>
    </div>
</template>

<script>
// 引入热门搜索组件
import HistoryHot from '@/components/search/HistoryHot.vue'
// 引入搜索提示列表组件
import SearchList from '@/components/search/SearchList.vue'
// 引入下拉菜单和商品列表组件
import GoodsList from '@/components/search/GoodsList.vue'
// 引入热门搜索和历史记录接口,商品搜索接口,实时搜索接口
import { getHistoryHot , searchGoods , GetSearchHelper} from '@/utils/http'
export default {
    name: "Search",
    props: [""],
    data() {
        return {
            keyword: "", // 搜索关键字
            isShow: 1, // 页面是否显示
            page: 1, // 默认页数
            size: 10, // 每页数据的条数
            order: "desc", // desc 由高到低  asc 由低到高
            categoryId: 0, // 商品类别id  全部 居家 服装  配件 ....
            sort: "id", // 排序方式 根据分类id 还是价格price
            goodsList: [], // 商品列表数据
            filterCategory: [], //所有的类别
            historyKeywordList: [], // 历史记录列表
            hotKeywordList: [],  // 热门搜索列表
            searchList: [], // 搜索提示列表(输入框输入时)
        };
    },
    components: {
        HistoryHot,  // 热门搜索组件
        SearchList,  // 搜索提示列表
        GoodsList,   // 下拉菜单和商品列表组件
    },
    created() {
        getHistoryHot().then((res)=>{
            console.log(res);
            this.historyKeywordList = res.data.data.historyKeywordList;
            // console.log(this.historyKeywordList);
            this.hotKeywordList = res.data.data.hotKeywordList;
        })
    },
    methods: {
        onSearch(){
            let params={
                keyword: this.keyword, // 搜索的关键字
                page: this.page, // 默认页数
                size: this.size, // 每页数据的条数
                order: this.order, // desc 由高到低  asc 由低到高
                categoryId: this.categoryId, // 商品类别id  全部 居家 服装  配件 ....
                sort: this.sort, // 排序方式 根据分类id 还是价格price
            };
            searchGoods(params).then((res)=>{
                // console.log(res);
                this.isShow = 3; // 显示搜索的商品列表
                this.goodsList = res.data.data.goodsList;
                this.filterCategory = res.data.data.filterCategory;
                // console.log(this.filterCategory);
                // 将filterCategory 这个数组中的所有name替换成text,将id换成value属性,利用字符串的replace方法替换
                this.filterCategory=JSON.parse(
                    JSON.stringify(this.filterCategory)
                    .replace(/name/g,'text')
                    .replace(/id/g,'value')          
                )  
            }).catch((e)=>{})
        },
        onInput(val){
            this.isShow = 2; // 展示搜索提示列表组件
            // 点击搜索触发
            GetSearchHelper({ keyword: val }).then((res)=>{
                console.log(res);
                this.searchList = res.data.data;
                console.log(this.searchList);
            })
        },
        onCancel(){
            // 点击取消触发
            this.$router.go(-1);
        },
        gotoSearchFn(k){
            // console.log(k);
            this.keyword = k;
            // 修改完参数,重新获取数据
            this.onSearch();
        },
        changePriceFn(m){
            // 切换价格排序触发的事件
            // console.log(m); 
            this.order = m;
            this.sort = 'price';
            // 修改完参数,重新获取数据
            this.onSearch();
        },
        changeKindFn(n){
            // 切换类别触发的事件
            this.categoryId = n;
            this.sort = "id";
            // 修改完参数,重新获取数据
            this.onSearch();
        }
    },
};
</script>
<style lang="less" scoped>

</style>